{{ define "cart" }}
    {{ template "header" . }}
    
    <div {{ with $.platform_css }} class="{{.}}" {{ end }}>
        <span class="platform-flag">
            {{$.platform_name}}
        </span>
    </div>
    
    <main role="main" class="cart-sections">

        {{ if eq (len $.items) 0 }}
        <section class="empty-cart-section">
            <h3>你的购物车是空的!</h3>
            <p>你购买的商品将出现在这里.</p>
            <a class="cymbal-button-primary" href="/" role="button">继续购物...</a>
        </section>
        {{ else }}
        <section class="container">
            <div class="row">

                <div class="col-lg-6 col-xl-5 offset-xl-1 cart-summary-section">

                    <div class="row mb-3 py-2">
                        <div class="col-4 pl-md-0">
                            <h3>已购 ({{ $.cart_size }})</h3>
                        </div>
                        <div class="col-8 pr-md-0 text-right">
                            <form method="POST" action="/cart/empty">
                                <button class="cymbal-button-secondary cart-summary-empty-cart-button" type="submit">
                                    清空购物车
                                </button>
                                <a class="cymbal-button-primary" href="/" role="button">
                                    继续购物
                                </a>
                            </form>
                        </div>
                    </div>

                    {{ range $.items }}
                    <div class="row cart-summary-item-row">
                        <div class="col-md-4 pl-md-0">
                            <a href="/product/{{.Item.Id}}">
                                <img class="img-fluid" alt="" src="{{.Item.Picture}}" />
                            </a>
                        </div>
                        <div class="col-md-8 pr-md-0">
                            <div class="row">
                                <div class="col">
                                    <h4>{{ .Item.Name }}</h4>
                                </div>
                            </div>
                            <div class="row cart-summary-item-row-item-id-row">
                                <div class="col">
                                    SKU #{{ .Item.Id }}
                                </div>
                            </div>
                            <div class="row">
                                <div class="col">
                                    数量: {{ .Quantity }}
                                </div>
                                <div class="col pr-md-0 text-right">
                                    <strong>
                                        {{ renderMoney .Price }}
                                    </strong>
                                </div>
                            </div>
                        </div>
                    </div>
                    {{ end }}

                    <div class="row cart-summary-shipping-row">
                        <div class="col pl-md-0">运费</div>
                        <div class="col pr-md-0 text-right">{{ renderMoney .shipping_cost }}</div>
                    </div>

                    <div class="row cart-summary-total-row">
                        <div class="col pl-md-0">总计</div>
                        <div class="col pr-md-0 text-right">{{ renderMoney .total_cost }}</div>
                    </div>

                </div>

                <div class="col-lg-5 offset-lg-1 col-xl-4">

                    <form class="cart-checkout-form" action="/cart/checkout" method="POST">

                        <div class="row">
                            <div class="col">
                                <h3>配送地址</h3>
                            </div>
                        </div>

                        <div class="form-row">
                            <div class="col cymbal-form-field">
                                <label for="email">E-mail地址</label>
                                <input type="email" id="email"
                                    name="email" value="524060020@qq.com" required>
                            </div>
                        </div>

                        <div class="form-row">
                            <div class="col cymbal-form-field">
                                <label for="street_address">街道</label>
                                <input type="text" name="street_address"
                                    id="street_address" value="和平里16号" required>
                            </div>
                        </div>

                        <div class="form-row">
                            <div class="col cymbal-form-field">
                                <label for="zip_code">邮编</label>
                                <input type="text"
                                    name="zip_code" id="zip_code" value="94043" required pattern="\d{4,5}">
                            </div>
                        </div>

                        <div class="form-row">
                            <div class="col cymbal-form-field">
                                <label for="city">城市</label>
                                <input type="text" name="city" id="city"
                                    value="张家口" required>
                                </div>
                            </div>

                        <div class="form-row">
                            <div class="col-md-5 cymbal-form-field">
                                <label for="state">省</label>
                                <input type="text" name="state" id="state"
                                    value="河北" required>
                            </div>
                            <div class="col-md-7 cymbal-form-field">
                                <label for="country">国家</label>
                                <input type="text" id="country"
                                    placeholder="Country Name"
                                    name="country" value="中国" required>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col">
                                <h3 class="payment-method-heading">付款方式</h3>
                            </div>
                        </div>

                        <div class="form-row">
                            <div class="col cymbal-form-field">
                                <label for="credit_card_number">信用卡号</label>
                                <input type="text" id="credit_card_number"
                                    name="credit_card_number"
                                    placeholder="0000-0000-0000-0000"
                                    value="4432-8015-6152-0454"
                                    required pattern="\d{4}-\d{4}-\d{4}-\d{4}">
                            </div>
                        </div>

                        <div class="form-row">
                            <div class="col-md-5 cymbal-form-field">
                                <label for="credit_card_expiration_month">月</label>
                                <select name="credit_card_expiration_month" id="credit_card_expiration_month">
                                    <option value="1">1</option>
                                    <option value="2">2</option>
                                    <option value="3">3</option>
                                    <option value="4">4</option>
                                    <option value="5">5</option>
                                    <option value="6">6</option>
                                    <option value="7">7</option>
                                    <option value="8">8</option>
                                    <option value="9">9</option>
                                    <option value="10">10</option>
                                    <option value="11">11</option>
                                    <option value="12">12</option>
                                </select>
                                <img src="/static/icons/Hipster_DownArrow.svg" alt="" class="cymbal-dropdown-chevron">
                            </div>
                            <div class="col-md-4 cymbal-form-field">
                                    <label for="credit_card_expiration_year">年</label>
                                    <select name="credit_card_expiration_year" id="credit_card_expiration_year">
                                    {{ range $i, $y := $.expiration_years}}<option value="{{$y}}"
                                        {{if eq $i 1 -}}
                                            selected="selected"
                                        {{- end}}
                                    >{{$y}}</option>{{end}}
                                    </select>
                                    <img src="/static/icons/Hipster_DownArrow.svg" alt="" class="cymbal-dropdown-chevron">
                                </div>
                            <div class="col-md-3 cymbal-form-field">
                                <label for="credit_card_cvv">CVV</label>
                                <input type="password" id="credit_card_cvv"
                                    name="credit_card_cvv" value="672" required pattern="\d{3}">
                            </div>
                        </div>

                        <div class="form-row justify-content-center">
                            <div class="col text-center">
                                <button class="cymbal-button-primary" type="submit">
                                    下单
                                </button>
                            </div>
                        </div>

                    </form>

                </div>

            </div>
        </section>
        {{ end }} <!-- end if $.items -->

    </main>

    {{ if $.recommendations}}
        {{ template "recommendations" $.recommendations }}
    {{ end }}

    {{ template "footer" . }}
    {{ end }}
